<!--
 * @Description:余额变动卡片
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-17 18:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-17 18:30:01
-->
<template>
	<view class="balance-change-card">
		<!-- 时间 -->

		<view class="content">
			<view class="item">
				<!-- 编号 -->
				<view class="left-no">
					<u-avatar size="96" :src='$u.file.getMedieUrl(data.icon)' mode="circle"></u-avatar>
				</view>
				<!-- 名称和描述 -->
				<view class="name-des">
					<view class="name">
						{{data.code}}
						<view class="title">
							{{data.recordTypeStr}}
						</view>
						<view class="title" v-if="data.payDate">
								{{publicJS.timeZoneSwitching(data.payDate)}}
						</view>
						<view class="title" v-else>
							{{publicJS.timeZoneSwitching(data.createTime)}}
						</view>
					</view>




					<view :class="`sum ${data.inOut==1?'add':'subtract'}`" v-if='!data.incomeType'>
						{{`${data.inOut==1?'+':'-'}`+Number(data.amountIncurred).toFixed(2)}}
					</view>
					<view :class="`sum ${data.incomeType==1?'add':'subtract'}`" v-else>
						{{`${data.incomeType==1?'+':'-'}`+Number(data.goldAmount).toFixed(2)}}
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	let that = null
	export default {
		name: 'balanceChangeCard',
		beforeCreate() {
			that = this
		},
		props: {
			data: {}
		},
	
		data() {
			return {}
		},
	}
</script>

<style lang="scss" scoped>
	.balance-change-card {
		.sum {
			font-size: 30rpx;

			&.add {
				color: #4DD029;
			}

			&.subtract {
				color: #FF2D55;
			}
		}

		>.content {
			border-radius: 26rpx 26rpx 26rpx 26rpx;

			>.item {
				flex: auto;
				display: flex;
				padding: 18rpx 0;
				align-items: flex-start;

				.left-no {
					width: 90rpx;
					height: 100%;
					line-height: 80rpx;
				}

				>.name-des {
					flex: auto;
					width: 0;
					display: flex;
					justify-content: space-between;
					margin-left: 24rpx;
					padding-bottom: 36rpx;
					border-bottom: 1px solid #ccc;

					.title {
						font-size: 24rpx;
						color: rgba(145, 144, 154, 1);
						margin-top: 12rpx;


					}

					.name {
						font-size: 30rpx;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						width: 300rpx;
					}

					.des {
						padding-top: 12rpx;
						font-size: 24rpx;
						color: #91909A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}


			}
		}
	}
</style>